import { AnimationTask } from './animation.sjs';

const queryElement = (ownerInstance, classSelector) => {
  return ownerInstance.selectComponent(`.${classSelector}`);
};

let instance = null;
let mode = 'same';

const imageLeftAnim = new AnimationTask(0, 5000, 1);
const imageRightAnim = new AnimationTask(0, 5000, 1);

let moveableLen, sliderWidth, viewWidth;
let startX = 0;
let movePosition;
let currentSliderMove = 0;
let currentSliderLeftMove = 0;
let currentSliderRightMove = 0;

const observerMode = modeProps => {
  mode = modeProps;
};

const observerLeftValue = (newValue, oldValue, ownerInstance) => {
  if (!instance) {
    instance = ownerInstance;
  }

  const moveableLen = getMoveableLen(ownerInstance);
  if (!moveableLen) return;
  const value = Math.min(100, Math.max(0, newValue));
  const len = (value * moveableLen) / 100;

  currentSliderLeftMove = len;
  // 初始化动画参数
  if (!imageLeftAnim.lastTime) {
    // imageLeftAnim.setImmediate(len);
    imageLeftAnim.maxChangedValue = moveableLen;
  } else {
    imageLeftAnim.startAnimation(len, 1.5);
  }
};

const observerRightValue = (newValue, oldValue, ownerInstance) => {
  if (!instance) {
    instance = ownerInstance;
  }
  const moveableLen = getMoveableLen(ownerInstance);
  if (!moveableLen) return;
  const value = Math.min(100, Math.max(0, newValue));
  const len = (value * moveableLen) / 100;
  currentSliderRightMove = len;
  // 初始化动画参数
  if (!imageRightAnim.lastTime) {
    // imageRightAnim.setImmediate(len);
    imageRightAnim.maxChangedValue = moveableLen;
  } else {
    imageRightAnim.startAnimation(len, 1.5);
  }
};

const observerLeftStateValue = (newValue, oldValue, ownerInstance) => {
  if (!instance) {
    instance = ownerInstance;
  }

  const moveableLen = getMoveableLen(ownerInstance);
  if (!moveableLen) return;
  const value = Math.min(100, Math.max(0, newValue));
  const len = (value * moveableLen) / 100;

  currentSliderLeftMove = len;
  // 初始化动画参数
  if (!imageLeftAnim.lastTime) {
    imageLeftAnim.setImmediate(len);
    imageLeftAnim.maxChangedValue = moveableLen;
  } else {
    imageLeftAnim.startAnimation(len);
  }
};

const observerRightStateValue = (newValue, oldValue, ownerInstance) => {
  if (!instance) {
    instance = ownerInstance;
  }
  const moveableLen = getMoveableLen(ownerInstance);
  if (!moveableLen) return;
  const value = Math.min(100, Math.max(0, newValue));
  const len = (value * moveableLen) / 100;
  currentSliderRightMove = len;
  // 初始化动画参数
  if (!imageRightAnim.lastTime) {
    imageRightAnim.setImmediate(len);
    imageRightAnim.maxChangedValue = moveableLen;
  } else {
    imageRightAnim.startAnimation(len);
  }
};

const getMoveableLen = ownerInstance => {
  if (moveableLen) return moveableLen;
  const container = queryElement(ownerInstance, 'container');
  if (!container) return;
  const view = container.getBoundingClientRect();
  sliderWidth = 25;
  viewWidth = 375;
  moveableLen = view.width / 2 - 21;
  return moveableLen;
};

const setImageLeftStyle = (ownerInstance, value) => {
  const leftImage = queryElement(ownerInstance, 'image-left');
  const rightImage = queryElement(ownerInstance, 'image-right');
  const move = Math.max(0, Math.min(moveableLen, value));
  leftImage.setStyle({
    width: `${move + sliderWidth}px`,
  });
};

const setImageRightStyle = (ownerInstance, value) => {
  const leftImage = queryElement(ownerInstance, 'image-left');
  const rightImage = queryElement(ownerInstance, 'image-right');
  const move = Math.max(0, Math.min(moveableLen, value));

  rightImage.setStyle({
    width: `${move + sliderWidth}px`,
  });
};

imageLeftAnim.onUpdate = function (value) {
  setImageLeftStyle(instance, value);
};

imageLeftAnim.onAnimationEnd = function () {
  instance.callMethod('onAnimationEnd');
};

imageLeftAnim.onAnimationStart = function () {
  instance.callMethod('onAnimationStart');
};

imageRightAnim.onUpdate = function (value) {
  setImageRightStyle(instance, value);
};

imageRightAnim.onAnimationEnd = function () {
  instance.callMethod('onAnimationEnd');
};

imageRightAnim.onAnimationStart = function () {
  instance.callMethod('onAnimationStart');
};

let lastControl = '';
const controlChange = (newControl, oldControl, ownerInstance) => {
  console.log('newControl', newControl);
  if (newControl !== lastControl) {
    lastControl = newControl;
    if (newControl === 'stop') {
      imageLeftAnim.stopAnimation();
    } else if (newControl === 'continue') {
      imageLeftAnim.startAnimation(currentSliderLeftMove);
    } else if (newControl === 'close') {
      imageLeftAnim.startAnimation(moveableLen, 1.5);
    } else if (newControl === 'open') {
      imageLeftAnim.startAnimation(0, 1.5);
    }
  }
};

let lastControl2 = '';
const control2Change = (newControl, oldControl, ownerInstance) => {
  console.log('newControl', newControl);
  if (newControl !== lastControl2) {
    lastControl2 = newControl;
    if (newControl === 'stop') {
      imageRightAnim.stopAnimation();
    } else if (newControl === 'continue') {
      imageRightAnim.startAnimation(currentSliderRightMove);
    } else if (newControl === 'close') {
      imageRightAnim.startAnimation(moveableLen, 1.5);
    } else if (newControl === 'open') {
      imageRightAnim.startAnimation(0, 1.5);
    }
  }
};

module.exports = {
  controlChange,
  control2Change,

  observerMode,
  observerLeftValue,
  observerRightValue,
  observerLeftStateValue,
  observerRightStateValue,
};
